<template>
  <div>
    <div class="handle-box">
      <el-input
        v-model="pagination.title"
        placeholder="公告标题"
        class="handle-input mrb10"
      ></el-input>
      <el-button type="primary" icon="el-icon-search" @click="getNotices()">搜索</el-button>
      <el-button type="danger" @click="clearSearch()">清除参数</el-button>
      <el-button type="primary" @click="$router.push({ path: '/editNotice' })">新增公告</el-button>
    </div>
    <el-table
      :data="notices"
      border
      class="table"
      header-cell-class-name="table-header"
    >
      <el-table-column
        prop="title"
        label="公告标题"
        align="center"
        width="400px"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column label="是否启用" align="center" width="150px">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === false ? 'danger' : 'success'" disable-transitions>
            {{ scope.row.status === false ? "禁用" : "启用" }}
          </el-tag>
          <el-switch @click.native="changeStatus(scope.row)" v-model="scope.row.status"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="创建人" align="center">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.createBy == 'admin'" disable-transitions>
            超级管理员
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        align="center"
        width="180px"
      ></el-table-column>
      <el-table-column
        prop="updateTime"
        label="最后修改时间"
        align="center"
        width="180px"
      ></el-table-column>
      <el-table-column label="操作" width="180" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="handleEdit(scope.row)"
          >编辑
          </el-button
          >
          <el-button
            type="text"
            icon="el-icon-delete"
            style="color: var(--orangeRed)"
            @click="deleteNotice(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, prev, pager, next"
        :current-page="pagination.current"
        :page-size="pagination.size"
        :total="pagination.total"
        @current-change="handlePageChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      pagination: {
        current: 1,
        size: 10,
        total: 0,
        title: ""
      },
      notices: []
    };
  },

  computed: {},

  watch: {},

  created() {
    this.getNotices();
  },

  mounted() {
  },

  methods: {
    clearSearch() {
      this.pagination = {
        current: 1,
        size: 10,
        total: 0,
        title: ""
      };
      this.getNotices();
    },
    getNotices() {
      this.$createHttp.noticePage(this.pagination).then((res) => {
        if (res.code === 200) {
          this.notices = res.data.records;
          this.pagination.total = res.data.total;
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    handlePageChange(val) {
      this.pagination.current = val;
      this.getNotices();
    },
    deleteNotice(id) {
      this.$confirm('确认删除该公告?').then(_ => {
        this.$createHttp.deleteNotice(id).then(res => {
          if (res.code === 200) {
            this.$message({
              message: "删除成功!",
              type: "success"
            })
            this.getNotices();
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            })
          }
        })
      })
    },
    handleEdit(item) {
      this.$router.push({path: "/editNotice", query: {id: item.id}});
    },
    changeStatus(row) {
      this.$createHttp.changeStatus(row.id, row.status).then(res => {
        if (res.code === 200) {
          this.$message({
            message: "修改成功！",
            type: "success",
          });
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    }
  },
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-input {
  width: 160px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.mrb10 {
  margin-right: 10px;
  margin-bottom: 10px;
}

.pagination {
  margin: 20px 0;
  text-align: right;
}
</style>
